<script setup lang="ts">
import { provide, ref } from 'vue'
import ParentComp from './components/ParentComp.vue'
import MyDialog from './components/MyDialog.vue'

// 1. app组件数据传递给child
const count = ref(0)

// 2. app组件函数传递给child，调用的时候可以回传数据
const updateCount = (num: number) => {
  count.value += num
}
provide('count', count)
const txtContent = ref('拉屎要用力~~')
provide('updateCount', updateCount)
const dia = () => {
  alert(txtContent.value)
}
</script>

<template>
  <div class="app-page" style="border: 10px solid #ccc; padding: 50px; width: 600px">
    app 组件 {{ count }} updateCount
    <ParentComp />
    <MyDialog>
      <template #content>
        <h2>强强，加油，</h2>
        <h2>{{ txtContent }}</h2>
      </template>
      <template #confirendBut>
        <h1 @click="dia">确认</h1>
      </template>
    </MyDialog>
    <MyDialog>
      <template #closeBut>
        <h1>取消</h1>
      </template>
    </MyDialog>
  </div>
</template>
